<script setup>
import { useIndexStore } from "@/stores/indexStore";

const props = defineProps({
  title: {
    type: String,
    default: "默认标题",
  },
});
</script>

<template>
  <!-- 顶部返回按钮 -->
  <div class="topBottom">
    <div class="title_button">
      <div class="forward" @click="$router.back()">
        <van-icon
          name="arrow-left"
          size="20"
          color="#777"
          :class="[useIndexStore().isRtl ? 'trun_180' : '']"
        />
      </div>

      <div class="title">
        {{ title }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topBottom {
  position: fixed;
  left: 0;
  right: 0;
  padding-top: 10rem;
  z-index: 10;

  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  justify-content: space-between;

  .title_button {
    display: flex;

    .title {
      width: 325rem;
      font-size: 20rem;
      line-height: 50rem;
      display: flex;
      justify-content: center;
    }

    .forward {
      padding-top: 10rem;
      text-align: center;
      line-height: 38rem;
      width: 40rem;
      height: 38rem;
      border-radius: 5rem;
    }
  }

  .back {
    margin-top: 10rem;
    color: #fff;
    padding: 0 30rem;
    border-radius: 30rem;
    height: 30rem;
    line-height: 30rem;
    background-color: #642e8eff;
  }
}
</style>
